<template>
    <div>
        <UserLayout>
            <div class="app-row app-col-space10">
                <div class="app-col-xs12 app-col-sm8">
                    <div class="app-card">
                        <div class="app-card-header">
                            <div>绑定手机号</div>
                            <div class="header-setting">
                                <a-tooltip>
                                    <template v-slot:title>返回</template>
                                    <a-button
                                            type="dashed"
                                            shape="circle"
                                            size="small"
                                            @click="goUrl('/user')"
                                    >
                                        <ArrowLeftOutlined/>
                                    </a-button>
                                </a-tooltip>
                            </div>
                        </div>
                        <div class="app-card-body">
                            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-form-item label="手机号">
                                    <a-input v-model:value="form.phone"/>
                                </a-form-item>
                                <a-form-item label="验证码">
                                    <a-input v-model:value="form.code" placeholder="输入验证码">
                                        <template #addonAfter>
                                            <a-button size="small" type="link" v-show="show" @click="getYzm">点击获取验证码
                                            </a-button>
                                            <a-button size="small" type="link" v-show="!show" disabled>{{count}}s后可重试
                                            </a-button>
                                        </template>
                                    </a-input>
                                </a-form-item>
                                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                                    <a-button type="primary" @click="submit">提 交</a-button>
                                </a-form-item>
                            </a-form>
                        </div>
                    </div>
                </div>
                <div class="app-col-xs12 app-col-sm4">
                    <HeadImg></HeadImg>
                </div>
            </div>

        </UserLayout>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import website from "/src/config/website";
    import {goUrl} from '/src/util/index';

    import UserLayout from '/src/components/user/Layout.vue';
    import HeadImg from '/src/components/user/HeadImg.vue';
    import {ArrowLeftOutlined} from '@ant-design/icons-vue';

    import {getYzm, bindPhone} from '/src/request/api/user';

    export default {
        name: "bindPhone",
        // 组件
        components: {
            UserLayout,
            HeadImg,
            ArrowLeftOutlined,
        },
        // 数据
        data() {
            return {
                website: website,
                // vuex 状态
                store: useStore().state,
                // 表单
                labelCol: {span: 4},
                wrapperCol: {span: 14},
                form: {
                    phone: '',
                    code: '',
                },
                // 倒计时
                show: true,
                count: '',
                timer: null,
            }
        },
        // DOM未渲染前调用
        created() {

        },
        // 方法
        methods: {
            // 前往
            goUrl(url) {
                goUrl(url);
            },
            // 倒计时
            countDown() {
                const TIME_COUNT = 5;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 1 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }
            },
            // 获取验证码
            getYzm() {
                console.log('getYzm');
                let that = this,
                    form = that.form;
                if (form.phone.length != 11) {
                    that.$message.warning('手机号有误');
                    return false;
                }
                getYzm({
                    phone: form.phone,
                }).then(res => {
                    that.$message.success(res.msg);
                    // 倒计时
                    that.countDown();
                }).catch(err => {
                    console.log(err);
                    that.$message.error(err.msg);
                })
            },
            // 绑定手机号
            submit() {
                let that = this,
                    form = that.form;
                if (!form.phone) {
                    that.$message.warning('手机号不能为空');
                    return false;
                }
                if (!form.code) {
                    that.$message.warning('验证码不能为空');
                    return false;
                }
                bindPhone({
                    phone: form.phone,
                    code: form.code,
                }).then(res => {
                    that.$message.success(res.msg);
                    goUrl('/user')
                }).catch(err => {
                    console.log(err);
                    that.$message.error(err.msg);
                })
            },
        }
    }
</script>

<style scoped>

</style>